import Taro, {Component, Config} from '@tarojs/taro'
import {Image, Input, View} from '@tarojs/components'
import { SDBody } from 'sudao-ui'
import SDUtils from 'sudao-utils'

import SearchIcon from '../../../../images/ic_search_black.png'
import ClearIcon from '../../../../images/ic_delete.png'

import './index.less'

export default class OrderSearchPage extends Component {

  config: Config = {
    navigationBarTitleText: '订单搜索'
  }

  keywords: string = ''

  render () {
    return (
      <SDBody sd-class='container' loading={false}>
        <View className="section-search">
          <View className="search-content">
            <Image className="search-icon" src={SearchIcon}></Image>
            <Input className="search-input" placeholder='请输入订单号' confirmType='search' placeholderStyle='color:#999;' onInput={this.onInputValueChange} onConfirm={this.onSearch} />
          </View>
          <View className="search-btn" onClick={this.goBack}>
            <View className="title">取消</View>
          </View>
        </View>
        <View className="main-content">
          <View className="section">
            <View className="section-header">
              <View className="title">搜索历史</View>
              <View className="clear-btn">
                <Image className="clear-icon" src={ClearIcon}></Image>
              </View>
            </View>
            <View className="section-list">
              <View className="cell-item" onClick={this.execSearch.bind(this, '10942001')}>
                <View className="title">10942001</View>
              </View>
              <View className="cell-item" onClick={this.execSearch.bind(this, '10953002')}>
                <View className="title">10953002</View>
              </View>
              <View className="cell-item" onClick={this.execSearch.bind(this, '10953007')}>
                <View className="title">10953007</View>
              </View>
              <View className="cell-item" onClick={this.execSearch.bind(this, '10956008')}>
                <View className="title">10956008</View>
              </View>

            </View>
          </View>
        </View>
      </SDBody>
    )
  }

  goBack = () => {
    Taro.navigateBack()
  }

  onInputValueChange = e => {
    this.keywords = e.detail.value
  }

  onSearch = () => {
    this.execSearch(this.keywords)
  }

  execSearch = (keywords) => {
    SDUtils.jumpTo('/pages/order/search/result/index', {keywords: keywords})
  }
}
